<template>
  <div>
    <div>欢迎页面</div>
    <el-dialog
      title="滑块验证"
      :visible.sync="slideVerifyDialogVisible"
      width="350px"
      ref="slideVerifyRef"
    >
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        slider-text="向右滑动"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      ></slide-verify>
      <div>{{ msg }}</div>
    </el-dialog>

    <!-- 骨架屏 -->
    <el-skeleton style="width: 240px" animated :loading="loading">
      <!-- 骨架屏模板 -->
      <template slot="template">
        <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
        <div style="padding: 14px 0">
          <el-skeleton-item variant="p" style="width: 50%" />
          <div
            style="
              display: flex;
              align-items: center;
              justify-items: space-between;
            "
          >
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
          </div>
        </div>
      </template>
      <!-- 真实骨架DOM -->
      <template>
        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
          <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            class="image"
          />
          <div style="padding: 14px">
            <span>好吃的汉堡</span>
            <div class="bottom card-header">
              <span class="time">{{ currentDate }}</span>
              <el-button type="text" class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </template>
    </el-skeleton>

    <!-- 数字滚动 -->
    <h2>数字滚动</h2>
    <countTo
      :startVal="2017"
      :endVal="3000"
      :duration="3000"
      style="color: red; font-size: 30px"
      :autoplay="false"
      ref="countTo"
    ></countTo>
  </div>
</template>

<script>
// 引入数字滚动插件
import countTo from 'vue-count-to'
export default {
  name: 'welcome',
  data() {
    return {
      slideVerifyDialogVisible: true,
      msg: '',
      // 控制骨架屏的显示隐藏
      loading: true
    }
  },
  components: {
    countTo
  },
  methods: {
    onSuccess() {
      this.$message.success('验证成功')
      // 验证成功关闭弹出框
      this.slideVerifyDialogVisible = false
      // 验证成功隐藏骨架屏显示真实DOM
      setTimeout(() => {
        this.loading = false
      }, 1000)

      // 验证成功后开始数字滚动
      this.$refs.countTo.start()
    },
    onFail() {
      this.msg = ''
    },
    onRefresh() {
      this.msg = ''
    }
  }
}
</script>

<style scoped>
</style>
